<template>
  <van-tabs v-model="tabNav" sticky swipeable @change="tabChange">
    <van-tab v-for="(tabitem,tabIndex) in 4" :title="'选项 ' + tabIndex" :key="tabIndex">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loadingList" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="(item,index) in list" :key="index" :title="item.address+tabIndex" />
        </van-list>
      </van-pull-refresh>
    </van-tab>
  </van-tabs>

</template>
<script>
import { userLIst } from '../server/api'
export default {
  name: 'About',
  data() {
    return {
      isLoading: false,//下拉刷新加载状态
      loadingList: false,//上拉加载更多加载状态
      finished: false,//数据加载完毕，finished 为true
      list: [],
      page: 0,
      total: 0,
      tabNav:0,
    }
  },
  methods: {
    tabChange(val){
      console.log(val)
    },
    getUserList() {
      let params = { page: this.page, size: 10, sort: 'id,desc' }
      userLIst(params).then(res => {
        this.total = res.totalElements
        this.list = this.list.concat(res.content)
        // 加载状态结束
        this.loadingList = false
        if (this.list.length >= this.total) {
          this.finished = true;
        } else {
          this.page++;
        }
      }).catch(err=>{
        console.log(err)
        this.loadingList = false
        this.finished = true;
      })
    },
    onLoad() {
      // 异步更新数据
      this.getUserList()
    },
    onRefresh() {
      //刷新初始化数据
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
        this.page=0;
        this.list=[]
        this.getUserList()

      }, 1000);
    },
  }
}
</script>
